<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>响应研判</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <SjMapList mapType="xyyp" />
      </div>
      <div class="Emergency-tb">
        <SelectOptions :value="eventCode" :options="yjsj_options" @change="changeEvent" />

        <div class="Emergency-tb-bt" style="height: 30%;">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">事件信息</div>
          </div>
          <!-- 内容区域 -->
          <div class="tabs_row_content">
            <div v-for="(item, i) in event_list" :key="i" style="margin-bottom: 10px;">
              <div style="display:flex;justify-content:space-between;">
                <div class="grid-content bg-purple">事件类别：{{ item.eventName }}</div>
                <div class="grid-content bg-purple">事件级别：{{ item.eventLvName }}</div>
                <div class="grid-content bg-purple">影响范围：{{ item.effectRange }}</div>
                <div class="grid-content bg-purple">发生时间：{{ item.occurrenceTime }}</div>
              </div>
              <div class="sjgy_name">
                <div class="name">事件概要：{{ item.incidentOutline }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Emergency-tb-bt" style="height: 54%;">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">灾情信息</div>
          </div>
          <div class="zqxx">
            <!-- 灾情信息 -->
            <LsdTable slot="gjxm" :compRef="disasterInfoConfig.compRef" :columns="disasterInfoConfig.columns"
              :actions="disasterInfoConfig.actions" :tableData="disasterInfoConfig.tableData"
              :tableAttr="disasterInfoConfig.tableAttr" :isShowPage="disasterInfoConfig.isShowPage"
              :isSelectFlag="disasterInfoConfig.isSelectFlag" :isSequenceFlag="disasterInfoConfig.isSequenceFlag"
              class="zqxx-table" />
          </div>
        </div>
      </div>
      <div class="Emergency-tb-zzt">
        <div class="Emergency-tb-bt-titel">
          <div class="Emergency-tb-bt-top" style="font-size: 18px;">研判标准</div>
          <!-- <div class="Emergency-tb-bt-center">
            <el-select v-model="eventTypeCode" placeholder="请选择" size="mini" @change="changeEventTypeCode" style="width: 141px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <SelectOptions :value="eventTypeCode" :options="options" @change="changeEventTypeCode" />

        </div>
        <div class="Emergency-tb-bt-ypbz">
          <div class="Emergency-tb-bt-ypbzs" v-for="(item, i) in ypbz_tables" :key="i">
            <div :class="item.color_class">{{ item.formate_title }}级</div>
            <el-table :data="item.table" border style="width: 100%" height="190" :row-class-name="tableRowClassName">
              <el-table-column type="index" label="序号" width="59" align="center">
              </el-table-column>
              <el-table-column prop="startCondition" label="启动条件" align="center">
                <template slot-scope="scope">
                  <p style="text-align: left;">{{ scope.row.startCondition }}</p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 列表表格 -->
      </div>
    </div>

    <!-- 输电线路 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTableVisible" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border :cell-style="{ color: '#606266' }" class="tc">
        <el-table-column prop="lineName" align="center" label="停运输电线路名称" width="180">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="center" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 变电站 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTransformerSubstation" width="50%">
      <el-table :data="tableData111" :cell-style="{ color: '#606266' }"
        :header-cell-style="{ background: '#B1C8F9', color: '#000', }" style="width: 100%" border class="tc">
        <el-table-column prop="lineName" align="center" label="停运变电站名称" width="180">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="center" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 配电 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogDistribution" width="50%">
      <el-table :data="tableData111" :cell-style="{ color: '#606266' }" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border class="tc">
        <el-table-column prop="lineName" align="center" label="停运配电线路名称" width="180">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="center" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 台区及用户 -->
    <el-dialog title="停运台区查看" :visible.sync="dialogShutdownStationArea" width="50%">
      <el-table :data="tableData111" :cell-style="{ color: '#606266' }" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border class="tc">
        <el-table-column prop="lineName" align="center" label="停运台区名称" width="220">
        </el-table-column>
        <!-- <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column> -->
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="center" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 重要用户 -->
    <el-dialog title="停电重要用户查看" :visible.sync="dialogImportantUsers" width="50%">
      <el-table :data="tableData111" :cell-style="{ color: '#606266' }" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border class="tc">
        <el-table-column prop="lineName" align="center" label="停电重要用户" width="220">
        </el-table-column>
        <el-table-column prop="grade" align="center" label="客户等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="center" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SjMapList from "../EDEmergency/components/mapContent.vue";
import SelectOptions from "@/components/selectOptions.vue";

import {
  // getEmergencyEventsOptionsApi,
  getJudgeStandardApi,
  // getJudgeInfoListApi,
  listPage,
  getJudgeEventApi,
  getAlreadyIssue,
  getInfoDetailList
} from "@/api/EmergencyDisposal/xyyp.js";
// import { getAlreadyIssue } from "@/api/EarlyWarningManagement/yjyp.js";
// import {
//   EmergencyEventgetById
// } from "@/api/EmergencyDisposal/yjsj.js";
import { getDictByGroupEmergency } from "@/api/common.js";
import { index_zqxx_columns } from "./components/config";
// import { removeDomScope } from "@micro-zoe/micro-app"
const ypbz_tables = [{
  formate_title: "Ⅰ",
  color_class: "Emergency-tb-bt-ypbzls",
  table: [],
  title: "1"
}, {
  formate_title: "Ⅱ",
  color_class: "Emergency-tb-bt-ypbzhss",
  table: [],
  title: "2"
}, {
  formate_title: "Ⅲ",
  color_class: "Emergency-tb-bt-ypbzcs",
  table: [],
  title: "3"
}, {
  formate_title: "Ⅳ",
  color_class: "Emergency-tb-bt-ypbzhs",
  table: [],
  title: "4"
}];
export default {
  name: "ToTheHomePage",
  components: { SjMapList, SelectOptions },
  data() {
    const getRatioTotal = ({ columns, data }) => {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property != "tqRater" && column.property != "ptyhRater" && column.property != "zyyhRater") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          });
          sums[index];
          console.log("column.property", column.property);
        } else {
          console.log("+++", column.property);
          sums[index] = (sums[index - 1] / sums[index - 2] * 100).toFixed(0) + "%";
        }
      });
      return sums;
    };
    return {
      form: {},
      mapData: [],
      // 灾情信息
      disasterInfoConfig: {
        isSelectFlag: false,
        compRef: "gjxm",
        isSequenceFlag: false,
        // isShowPage: true,
        resetFlag: true,
        loading: false,
        // title: "灾情信息报送单列表",
        actions: [
        ],
        tableData: [],
        columns: index_zqxx_columns,
        tableAttr: {
          height: "200px",
          stripe: false,
          "show-summary": true,
          "summary-method": getRatioTotal,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "transparent",
            color: "#fff",
            border: "1px solid #22588F",
            "font-size": "16px"
          }
        }
      },
      options: [],
      eventCode: "",
      eventTypeCode: "",
      yjsj_options: [], // 应急是事件options
      event_list: [], // 应急事件
      ypbz_tables,
      tableData111: [], // 弹窗
      emergencyEventIds: "",
      dialogTableVisible: false, // 输电线路
      dialogTransformerSubstation: false, // 变电站
      dialogDistribution: false, // 配电
      dialogShutdownStationArea: false, //  台区及用户
      dialogImportantUsers: false, // 重要用户
      pageNum: 1,
      total: 0

    };
  },
  created() {
    this.getListPage();
    // this.getEmergencyEventsOptions();
    this.mapHanble();
    this.getDict();
  },
  methods: {
    async mapHanble() {
      const res = await getAlreadyIssue();
      console.log(res, "res11");
      this.mapData = res;
    },
    getDict() {
      getDictByGroupEmergency({ groupCode: "dic_sjlb" }).then(res => {
        if (res.length) {
          this.options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.dicCode
            };
          });
        }
      });
    },
    // 获取已研判的研判单
    getListPage() {
      listPage({ pageNum: 1, pageSize: 100, judgeState: 2 }).then(res => {
        if (res.data.length) {
          this.yjsj_options = res.data.map(item => {
            return {
              label: item.judgeName,
              value: item.emergencyEventIds
            };
          });
          // this.getEventDetail(res[0].id);
          // this.getJudgeInfoList(res[0].id);
          this.eventCode = res.data[0].emergencyEventIds;
          this.getJudgeEvent(res.data[0].emergencyEventIds);
          // this.eventTypeCode = res[0].eventCode
          // this.getJudgeStandard(res[0].eventCode)
          this.emergencyEventIds = res.data[0].emergencyEventIds;
        }
      });
    },
    getYjtzdCity(effectRange, index = 1) {
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      // const arr = effectRange.split("、");
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      this.initLayer(newList[0]);
    },
    initLayer(name = "湖北省") {
      console.log(name);
      this.$eventBus.$emit("createlayer", name);
    },
    // 获取研判单事件
    getJudgeEvent(eventIds) {
      getJudgeEventApi({ eventIds }).then(res => {
        console.log(res);
        const { emergencyEventList, statisticInfoList } = res;
        const effectRange = emergencyEventList[0].effectRange;
        this.getYjtzdCity(effectRange);
        this.event_list = emergencyEventList;
        this.eventTypeCode = emergencyEventList[0].eventCode;
        this.getJudgeStandard(emergencyEventList[0].eventCode);
        // this.getJudgeInfoList(emergencyEventList[0].id);
        this.$nextTick(() => {

          this.getJudgeInfoList(statisticInfoList);
        });
      });
    },
    // 获取应急事件来源
    // async getEmergencyEventsOptions() {
    //   try {
    //     const res = await getEmergencyEventsOptionsApi();
    //     if (res.length) {
    //       this.yjsj_options = res.map(item => {
    //         return {
    //           label: item.emergencyEvent,
    //           value: item.id
    //         };
    //       });
    //       // this.getEventDetail(res[0].id);
    //       this.getJudgeInfoList(res[0].id);
    //       this.eventCode = res[0].id;
    //       // this.eventTypeCode = res[0].eventCode
    //       // this.getJudgeStandard(res[0].eventCode)
    //     }

    //   } catch (error) {
    //     console.error(error);
    //   }
    // },
    // getEventDetail(id) {
    //   EmergencyEventgetById({ id }).then(res => {
    //     this.event_list = res || {};

    //     this.eventTypeCode = res.eventCode;
    //     this.getJudgeStandard(res.eventCode);
    //   });
    // },
    // 切换事件
    changeEvent(id) {
      // this.getEventDetail(id);
      this.getJudgeEvent(id);
      this.emergencyEventIds = id;
    },
    // 切换事件类别
    changeEventTypeCode(val) {
      this.getJudgeStandard(val);
    },
    // 获取灾情信息
    getJudgeInfoList(res) {
      // 输电线路
      // 500
      const sdxl500KvTrip = res.some(item => item.sdxl500KvTrip);
      const sdxl500KvRecover = res.some(item => item.sdxl500KvRecover);
      // 220
      const sdxl220KvTrip = res.some(item => item.sdxl220KvTrip);
      const sdxl220KvRecover = res.some(item => item.sdxl220KvRecover);
      //  110kv
      const sdxl110KvTrip = res.some(item => item.sdxl110KvTrip);
      const sdxl110KvRecover = res.some(item => item.sdxl110KvRecover);
      //  35kv
      const sdxl35KvTrip = res.some(item => item.sdxl35KvTrip);
      const sdxl35KvRecover = res.some(item => item.sdxl35KvRecover);
      // console.log(sdxl110KvTrip, sdxl110KvRecover, sdxl35KvTrip, sdxl35KvRecover)
      // 变电站
      // 500
      const bdz500KvTrip = res.some(item => item.bdz500KvTrip);
      const bdz500KvRecover = res.some(item => item.bdz500KvRecover);
      // 220
      const bdz220KvTrip = res.some(item => item.bdz220KvTrip);
      const bdz220KvRecover = res.some(item => item.bdz220KvRecover);
      // 110kv
      const bdz110KvTrip = res.some(item => item.bdz110KvTrip);
      const bdz110KvRecover = res.some(item => item.bdz110KvRecover);
      // 35kv
      const bdz35KvTrip = res.some(item => item.bdz35KvTrip);
      const bdz35KvRecover = res.some(item => item.bdz35KvRecover);
      // console.log(bdz110KvTrip, bdz110KvRecover, bdz35KvTrip, bdz35KvRecover)
      // 配电线路
      // 10kv
      const pdxl10KvTrip = res.some(item => item.pdxl10KvTrip);
      const pdxl10KvRecover = res.some(item => item.pdxl10KvRecover);
      // console.log(pdxl10KvTrip, pdxl10KvRecover)
      // 台区
      const tqTrip = res.some(item => item.tqTrip);
      const tqRecover = res.some(item => item.tqRecover);
      const tqRater = res.some(item => item.tqRater);
      // console.log(tqTrip, tqRecover, tqRater)
      // 用户
      const ptyhTrip = res.some(item => item.ptyhTrip);
      const ptyhRecover = res.some(item => item.ptyhRecover);
      const ptyhRater = res.some(item => item.ptyhRater);
      // console.log(ptyhTrip, ptyhRecover, ptyhRater)
      // 重要用户
      const zyyhTrip = res.some(item => item.zyyhTrip);
      const zyyhRecover = res.some(item => item.zyyhRecover);
      const zyyhRater = res.some(item => item.zyyhRater);
      // console.log(zyyhTrip, zyyhRecover, zyyhRater)



      const columns = [
        {
          prop: "unitName",
          label: "所属单位",
          align: "center",
          "width": "140px"
        }];

      // 输电线路
      if (sdxl500KvTrip || sdxl500KvRecover || sdxl220KvTrip || sdxl220KvRecover || sdxl110KvTrip || sdxl110KvRecover || sdxl35KvTrip || sdxl35KvRecover) {
        columns.push({
          // prop: "",
          label: "输电线路",
          align: "center",
          "min-width": "80px",
          children: []
        });
        // 500
        if (sdxl500KvTrip || sdxl500KvRecover) {
          const children = [];
          // if (sdxl500KvTrip) {
          children.push({
            prop: "sdxl500KvTrip",
            label: "累计跳闸",
            align: "center",
            "min-width": "90px",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline;font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            /* this.showShousunDialog("sdxl", "500kV", row.emergencyId, row.unitId); */
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologSdxl500(row);
                          }
                        }
                      }}
                    >
                      {row.sdxl500KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (sdxl500KvRecover) {
          children.push({
            prop: "sdxl500KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "90px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer; font-weight: 700'>
                      {row.sdxl500KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }

          columns[1].children.push(
            {
              label: "500kV及以上",
              align: "center",
              "min-width": "80px",
              children
            });
        }

        // 220
        if (sdxl220KvTrip || sdxl220KvRecover) {
          const children = [];
          // if (sdxl220KvTrip) {
          children.push({
            prop: "sdxl220KvTrip",
            label: "累计跳闸",
            align: "center",
            "min-width": "90px",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            /* this.showShousunDialog("sdxl", "220kV", row.emergencyId, row.unitId); */
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologSdxl220(row);
                          }
                        }
                      }}
                    >
                      {row.sdxl220KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (sdxl220KvRecover) {
          children.push({
            prop: "sdxl220KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "90px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer; font-weight: 700'>
                      {row.sdxl220KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }

          columns[1].children.push(
            {
              label: "220kV",
              align: "center",
              "min-width": "80px",
              children
            });
        }
        if (sdxl110KvTrip || sdxl110KvRecover) {
          const children = [];
          // if (sdxl110KvTrip) {
          children.push({
            prop: "sdxl110KvTrip",
            label: "累计跳闸",
            align: "center",
            "min-width": "99px",
            color: "#FF4F4F",
            "font-size": "17px",
            "font-family": "Arial",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologSdxl110(row);
                          }
                        }
                      }}
                    >
                      {row.sdxl110KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (sdxl110KvRecover) {
          children.push({
            prop: "sdxl110KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "99px",
            "font-size": "17px",
            "font-family": "Arial",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer; font-weight: 700'>
                      {row.sdxl110KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }

          columns[1].children.push(
            {
              label: "110kV",
              align: "center",
              "min-width": "80px",
              children
            });
        }
        if (sdxl35KvTrip || sdxl35KvRecover) {
          const children = [];

          // if (sdxl35KvTrip) {
          children.push({
            prop: "sdxl35KvTrip",
            label: "累计跳闸",
            align: "center",
            "min-width": "99px",
            color: "#FF4F4F",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologSdxl35(row);
                          }
                        }
                      }}
                    >
                      {row.sdxl35KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (sdxl35KvRecover) {
          children.push({
            prop: "sdxl35KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "99px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer;font-weight: 700'>
                      {row.sdxl35KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          columns[1].children.push(
            {
              label: "35kV",
              align: "center",
              "min-width": "80px",
              children
            });
        }
      }

      // 变电站
      if (bdz500KvTrip || bdz500KvRecover || bdz220KvTrip || bdz220KvRecover || bdz110KvTrip || bdz110KvRecover || bdz35KvTrip || bdz35KvRecover) {
        columns.push({
          // prop: "",
          label: "变电站",
          align: "center",
          "min-width": "100px",
          children: []
        });
        // 500
        if (bdz500KvTrip || bdz500KvRecover) {
          const children = [];
          // if (bdz500KvTrip) {
          children.push({
            prop: "bdz500KvTrip",
            label: "累计停运",
            align: "center",
            "min-width": "90px",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline;font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            /* this.showShousunDialog("sdxl", "500kV", row.emergencyId, row.unitId); */
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologBdz500(row);
                          }
                        }
                      }}
                    >
                      {row.bdz500KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (bdz500KvRecover) {
          children.push({
            prop: "bdz500KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "90px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer; font-weight: 700'>
                      {row.bdz500KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }

          columns[1].children.push(
            {
              label: "500kV及以上",
              align: "center",
              "min-width": "80px",
              children
            });
        }

        // 220
        if (bdz220KvTrip || bdz220KvRecover) {
          const children = [];
          // if (bdz220KvTrip) {
          children.push({
            prop: "bdz220KvTrip",
            label: "累计停运",
            align: "center",
            "min-width": "90px",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline;font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            /* this.showShousunDialog("sdxl", "220kV", row.emergencyId, row.unitId); */
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologBdz220(row);
                          }
                        }
                      }}
                    >
                      {row.bdz220KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (bdz220KvRecover) {
          children.push({
            prop: "bdz220KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "90px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer; font-weight: 700'>
                      {row.bdz220KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }

          columns[1].children.push(
            {
              label: "220kV",
              align: "center",
              "min-width": "80px",
              children
            });
        }
        if (bdz110KvTrip || bdz110KvRecover) {
          const children = [];
          // if (bdz110KvTrip) {
          children.push({
            prop: "bdz110KvTrip",
            label: "累计停运",
            align: "center",
            "min-width": "99px",
            color: "#FF4F4F",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologBdz110(row);
                          }
                        }
                      }}
                    >
                      {row.bdz110KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (bdz110KvRecover) {
          children.push({
            prop: "bdz110KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "99px",
            color: "#56F423",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer;font-weight: 700'>
                      {row.bdz110KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          columns[columns.length - 1].children.push(
            {
              label: "110kV",
              align: "center",
              "min-width": "120px",
              children
            });
        }
        if (bdz35KvTrip || bdz35KvRecover) {
          const children = [];
          // if (bdz35KvTrip) {
          children.push({
            prop: "bdz35KvTrip",
            label: "累计停运",
            align: "center",
            "min-width": "99px",
            color: "#FF4F4F",
            "class-name": "red",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                      {...{
                        on: {
                          click: () => {
                            // this.toZqtj(row.emergencyId, row.unitId);
                            this.handleDiologBdz35(row);
                          }
                        }
                      }}
                    >
                      {row.bdz35KvTrip}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          // if (bdz35KvRecover) {
          children.push({
            prop: "bdz35KvRecover",
            label: "累计恢复",
            align: "center",
            "min-width": "99px",
            "class-name": "green",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span style='color:#56F423;cursor:pointer;font-weight: 700'>
                      {row.bdz35KvRecover}
                    </span>
                  }
                </div>
              );
            }
          });
          // }
          columns[columns.length - 1].children.push(
            {
              label: "35kV",
              align: "center",
              "min-width": "120px",
              children
            });
        }
      }

      // 配电线路
      if (pdxl10KvTrip || pdxl10KvRecover) {
        const children = [];
        // if (pdxl10KvTrip) {
        children.push({
          prop: "pdxl10KvTrip",
          label: "累计停运",
          align: "center",
          "min-width": "99px",
          "class-name": "red",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span
                    style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                    {...{
                      on: {
                        click: () => {
                          this.handleDiologPdxl10(row);
                        }
                      }
                    }}
                  >
                    {row.pdxl10KvTrip}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (pdxl10KvRecover) {
        children.push({
          prop: "pdxl10KvRecover",
          label: "累计恢复",
          align: "center",
          "min-width": "99px",
          "class-name": "green",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span style='color:#56F423;cursor:pointer;font-weight: 700'>
                    {row.pdxl10KvRecover}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        columns.push({
          label: "配电线路",
          align: "center",
          "min-width": "100px",
          children: [
            {
              label: "10kV",
              align: "center",
              "min-width": "120px",
              children
            }
          ]
        });
      }

      // 台区
      if (tqTrip || tqRecover || tqRater) {
        const children = [];
        // if (tqTrip) {
        children.push({
          prop: "tqTrip",
          label: "累计停电",
          align: "center",
          "min-width": "99px",
          "class-name": "red",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span
                    style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                    {...{
                      on: {
                        click: () => {
                          this.handleDiologTq(row);
                        }
                      }
                    }}
                  >
                    {row.tqTrip}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (tqRecover) {
        children.push({
          prop: "tqRecover",
          label: "累计恢复",
          align: "center",
          "min-width": "99px",
          "class-name": "green",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span style='color:#56F423;cursor:pointer;font-weight: 700' >
                    {row.tqRecover}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (tqRater) {
        children.push({
          prop: "tqRater",
          label: "恢复率",
          align: "center",
          "min-width": "99px",
          formatter: (row, column, cellValue, index) => {
            if (cellValue === null) {
              return 0 + "%";
            } else {
              return cellValue;
            }
          }
        });
        // }
        columns.push({
          label: "台区",
          align: "center",
          "min-width": "100px",
          children: children
        });
      }
      // 用户
      if (ptyhTrip || ptyhRecover || ptyhRater) {
        const children = [];
        // if (ptyhTrip) {
        children.push({
          prop: "ptyhTrip",
          label: "累计停电",
          align: "center",
          "min-width": "99px",
          "class-name": "red",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span
                    style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                    {...{
                      on: {
                        click: () => {
                          // this.handleDiologYh();
                        }
                      }
                    }}
                  >
                    {row.ptyhTrip}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (ptyhRecover) {
        children.push({
          prop: "ptyhRecover",
          label: "累计恢复",
          align: "center",
          "min-width": "99px",
          "class-name": "green",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span style='color:#56F423;cursor:pointer;font-weight: 700' >
                    {row.ptyhRecover}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (ptyhRater) {
        children.push({
          prop: "ptyhRater",
          label: "恢复率",
          align: "center",
          "min-width": "90px",
          formatter: (row, column, cellValue, index) => {
            if (cellValue === null) {
              return 0 + "%";
            } else {
              return cellValue;
            }
          }
        });
        // }
        columns.push({
          label: "用户",
          align: "center",
          "min-width": "100px",
          children: children
        });
      }
      // 重要用户
      if (zyyhTrip || zyyhRecover || zyyhRater) {
        const children = [];
        // if (zyyhTrip) {
        children.push({
          prop: "zyyhTrip",
          label: "累计停电",
          align: "center",
          "min-width": "99px",
          "class-name": "red",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span
                    style='color:#FF4F4F;cursor:pointer;text-decoration: underline; font-weight: 700'
                    {...{
                      on: {
                        click: () => {
                          this.handleZyyh(row);
                        }
                      }
                    }}
                  >
                    {row.zyyhTrip}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (zyyhRecover) {
        children.push({
          prop: "zyyhRecover",
          label: "累计恢复",
          align: "center",
          "min-width": "99px",
          "class-name": "green",
          render: (h, { row }) => {
            return (
              <div>
                {
                  <span
                    style='color:#56F423;cursor:pointer;font-weight: 700'>
                    {row.zyyhRecover}
                  </span>
                }
              </div>
            );
          }
        });
        // }
        // if (zyyhRater) {
        children.push({
          prop: "zyyhRater",
          label: "恢复率",
          align: "center",
          "min-width": "99px",
          formatter: (row, column, cellValue, index) => {
            if (cellValue === null) {
              return 0 + "%";
            } else {
              return cellValue;
            }
          }
        });
        // }
        columns.push({
          label: "重要用户",
          align: "center",
          "min-width": "100px",
          children: children
        });
      }
      this.disasterInfoConfig.columns = res.length ? columns : index_zqxx_columns;
      this.disasterInfoConfig.tableData = res.length ? res : [];

    },
    // 获取研判标准
    async getJudgeStandard(eventCode) {
      try {
        const res = await getJudgeStandardApi({ eventCode });
        res.map(item => {
          item.startCondition = item.startCondition.slice(3);
          return item;
        });
        const formatting = ["Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ"];
        const colors = ["Emergency-tb-bt-ypbzls", "Emergency-tb-bt-ypbzhss", "Emergency-tb-bt-ypbzcs", "Emergency-tb-bt-ypbzhs"];
        const list = [];
        const deviceArr = [];
        res.forEach((item, index) => {
          if (deviceArr.indexOf(item.responseLvCode) === -1) {
            list.push({
              title: item.responseLvCode,
              formate_title: formatting[item.responseLvCode - 1],
              color_class: colors[item.responseLvCode - 1],
              table: []
            });
            deviceArr.push(item.responseLvCode);
          }
        });
        list.forEach(item => {
          res.forEach(items => {
            if (item.title == items.responseLvCode) {
              item.table.push(items);
            }
          });
        });
        this.ypbz_tables = list.length ? list : ypbz_tables;
      } catch (error) {
        console.log(error);
      }
    },
    toZqtj(emergencyId, unitId) {
      this.$router.push({
        name: "DisasterInformationStatistics"
        // query: {
        //   emergencyId,
        //   unitId
        // }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 != 0) {
        return "color-stripe";
      } else {
        return "";
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.list();
    },
    // 输电线路 500
    async handleDiologSdxl500(val) {
      // console.log(val, "500kV......")
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "500kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电线路 220
    async handleDiologSdxl220(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "220kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电线路 110
    async handleDiologSdxl110(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "110kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;

    },
    // 输电线路 35
    async handleDiologSdxl35(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "35kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
      console.log("tableData111", this.tableData111);
    },
    // 变电站500
    async handleDiologBdz500(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "500kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站220
    async handleDiologBdz220(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "220kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站变电站110
    async handleDiologBdz110(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "110kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站35
    async handleDiologBdz35(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "35kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
      // console.log(this.tableData111, "this.tableData111")
    },
    // 配电线路  10
    async handleDiologPdxl10(val) {
      this.dialogDistribution = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "pdxl", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "10kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 台区
    async handleDiologTq(val) {
      this.dialogShutdownStationArea = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "tq", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 用户
    // async handleDiologYh (val) {
    //   this.dialogTableVisible = true;
    //   const parmas = {
    //     pageNum: this.pageNum,
    //     pageSize: 10,
    //     specialtyCode: "ptyh", // 线路编码
    //     emergencyIds: this.emergencyEventIds, // 应急事件ids
    //     unitId: val.unitId //	所属单位id
    //     // voltageClasses: "" // 电压等级
    //   };
    //   const res = await getInfoDetailList(parmas);
    //   // console.log(res)
    //   this.total = res.total;
    //   this.tableData111 = res.data;
    // },
    // 重要用户
    async handleZyyh(val) {
      this.dialogImportantUsers = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "zyyh", // 线路编码
        emergencyIds: this.emergencyEventIds, // 应急事件ids
        unitId: val.unitId, //	所属单位id
        voltageClasses: "" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    }
  }
};
</script>

<style scoped lang="less">
.zqxx {
  overflow: auto;

  :deep(.el-table) {
    .el-table__cell {
      padding: 3px 0;
    }
  }

  // :deep(.zqxx-table) {
  //   & > div {
  //     // display: block !important;

  //     & > div {
  //       max-width: 100% !important;
  //     }
  //   }
  // }

  // :deep(.el-table) {
  //   // overflow-x: auto;
  //   // overflow-y: auto;

  //   .el-table__cell {
  //     padding: 3px 0;
  //   }

  //   th.el-table__cell > .cell {
  //     font-weight: normal;
  //   }

  //   .el-table--scrollable-x .el-table__body-wrapper {
  //     // overflow-x: visible;
  //     // overflow-x: hidden;
  //   }

  //   .el-table__body-wrapper {
  //     // overflow: visible;
  //     // height: 31px !important;

  //     td:first-child {
  //       .cell {
  //         padding: 0 3px;
  //       }
  //     }
  //   }

  //   .el-table__header-wrapper {
  //     // overflow: visible;

  //     th.el-table__cell:first-child {
  //       border-left: 0 !important;
  //     }
  //   }

  //   .el-table__footer-wrapper {
  //     // overflow: visible;
  //   }

  //   .el-table__footer-wrapper td.el-table__cell {
  //     border-top-color: transparent;
  //   }

  //   // .el-table::after {
  //   //   position: relative !important;
  //   // }
  // }

  // :deep(.el-table__footer) {
  //   td.green {
  //     color: #56f423;
  //     font-weight: 700;
  //   }

  //   td.red {
  //     color: #ff4f4f;
  //     font-weight: 700;
  //   }

  //   // td:nth-child(even) {
  //   //   color: #ff4f4f;
  //   //   font-weight: 700;
  //   // }

  //   // td:nth-child(odd) {
  //   //   color: #56f423;
  //   //   font-weight: 700;
  //   // }

  //   td:first-child {
  //     color: #fff;
  //     font-weight: normal;
  //   }
  // }

  // .el-table {}
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: transparent;
}

:deep(::-webkit-scrollbar) {
  height: 10px;
}

:deep(.el-input__inner) {
  background-color: transparent;
  border: #22588f 1px solid;
  color: #fff;
}

.Emergency-tb-zzt {
  :deep(.el-table--border .el-table__cell) {
    border-right: 1px solid transparent;
  }

  :deep(.el-table--border) {
    border-color: transparent;
  }
}

.Emergency-tb-bt {
  :deep(.el-table--border .el-table__cell) {
    border-right: 1px solid #22588f;
  }

  :deep(.el-table--border) {
    border-color: #22588f;
    border-left: 0;
  }

  :deep(.el-table) {
    background-color: transparent;
    color: #fff;

    &::before,
    &::after {
      background-color: transparent;
    }

    tr {
      background-color: transparent;
    }

    th.el-table__cell {
      background-color: transparent;
      border-bottom-color: #22588f;
    }

    td.el-table__cell {
      border-bottom-color: #22588f;
    }

    thead {
      color: #fff;
    }

    .el-table__empty-text {
      color: #fff;
    }
  }
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: transparent;
}

:deep(.color-stripe) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-table__footer-wrapper tbody td.el-table__cell) {
  background-color: transparent;
  color: #fff;
}

:deep(.el-table) {
  background-color: transparent;
  color: #fff;

  &::before,
  &::after {
    background-color: transparent;
  }

  tr {
    background-color: transparent;
  }

  th.el-table__cell {
    background-color: transparent;
    border-bottom-color: transparent;
  }

  td.el-table__cell {
    border-bottom-color: transparent;
  }

  thead {
    color: #fff;
  }

  .el-table__empty-text {
    color: #fff;
  }
}

// }

.Emergency {
  height: 95%;
  padding: 0px 20px;
  margin: 0;

  .half {
    width: 50%;
    display: flex;

    :deep(.el-form-item__content) {
      flex: 1 !important;
    }

    :deep(.el-select) {
      width: 100% !important;
    }

    :deep(.el-input) {
      width: 100% !important;
    }

    :deep(.el-date-editor) {
      width: 100% !important;
    }
  }

  :deep(.el-table__row) {
    font-size: 16px;
  }

  :deep(.has-gutter) {
    font-size: 16px !important;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }

  :deep(.el-button) {
    font-size: 16px;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-dt {
      width: 50%;
      height: 60%;
      border: #22588f 1px solid;
      border-radius: 4px;
    }

    .Emergency-tb {
      width: 49%;
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      :deep(.select-class .el-select) {
        width: 100%;
        border: none;
        box-shadow: 1px 1px 10px 2px rgb(54, 175, 255) inset;
        border-radius: 4px;
        background: rgba(46, 88, 219, 0.5);
        text-shadow: none;
        transition: box-shadow 0.25s ease;

        .el-input .el-input__inner {
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          font-weight: 700;
        }
      }

      .Emergency-tb-bd {
        width: 100%;

        // border: #3270ff 1px solid;
        .select {
          display: inline-block;
          width: 100%;
          position: relative;
          vertical-align: middle;
          padding: 0;
          overflow: hidden;
          border: none;
          opacity: 0.7;
          box-shadow: 1px 1px 10px 2px rgb(54, 175, 255) inset;
          border-radius: 4px;
          background: rgba(46, 88, 219, 0.5);
          text-shadow: none;
          transition: box-shadow 0.25s ease;
          z-index: 2;
        }

        :deep(.el-input__inner) {
          height: 48px;
          font-size: 18px;
          font-weight: bold;
        }

        .select:hover {
          box-shadow: 1px 1px 10px 2px rgb(43, 140, 243) inset;
        }

        .select:before {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-top-color: #fff;
          top: 45%;
          right: 10px;
          cursor: pointer;
          z-index: -2;
        }

        .select select {
          cursor: pointer;
          color: rgb(255, 255, 255);
          padding: 4px 10px;
          width: 100%;
          height: 100%;
          border: none;
          background: transparent;
          background-image: none;
          -webkit-appearance: none;
          -moz-appearance: none;

          option {
            padding-top: 15px;
            padding-bottom: 15px;
            background: rgba(46, 88, 219, 0.5);
            color: #fff;
          }
        }

        .select select:focus {
          outline: none;
        }

        .flexBetweens {
          align-items: center;
        }

        :deep(.el-form) {
          margin-top: 2px;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-form-item__content) {
          width: 60%;
        }

        :deep(.el-input__inner) {
          background-color: transparent;
          border: #22588f 1px solid;
          color: #fff;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 43%;
        border: #22588f 1px solid;
        // margin-top: 20px;

        .Emergency-tb-bt-titel {
          width: 100%;
          height: 45px;
          background-color: #265cff;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .Emergency-tb-bt-top {
            // width: 55%;
            margin-left: 15px;
            font-size: 18px;
            color: #d5f0ff;
            font-family: "MicrosoftYaHeiUI-Bold", "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
            font-weight: 700;
            letter-spacing: 1px;
          }

          .Emergency-tb-bt-center {
            // width: 35%;
            margin-right: 15px;

            :deep(.el-input__inner) {
              font-size: 18px;
            }
          }

          .Emergency-tb-bt-bottom {
            // width: 6%;
            margin-right: 15px;
            font-size: 16px;
            color: #397bfa;
            cursor: pointer;
          }
        }

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: #22588f 1px solid;
          border-radius: 2px;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 43%;
        border: #22588f 1px solid;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;

        .Emergency-tb-bt-bottom {
          color: #fff;
        }
      }
    }

    .Emergency-tb-zzt {
      width: 100%;
      height: 38%;
      // background-color: #eeeeee;
      border: #22588f 1px solid;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;

      .Emergency-tb-bt-titel {
        background: none;
        height: 40px;

        :deep(.select-class .el-select) {
          width: 100%;

          .el-input .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
        }
      }

      .Emergency-tb-bt-ypbz {
        // width: 100%;
        height: 90%;
        display: flex;
        // justify-content: space-between;
        // background-color: #d5f0ff;
        padding: 0 15px;

        .Emergency-tb-bt-ypbzs {
          width: 25%;
          // flex: 1;
          height: 100%;

          :deep(.el-table th.el-table__cell.is-leaf) {
            border-bottom-color: transparent;
          }

          .Emergency-tb-bt-ypbzhs {
            width: 100%;
            height: 49px;
            background-color: #385dae;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
          }

          .Emergency-tb-bt-ypbzcs {
            width: 100%;
            height: 49px;
            background-color: #2954b5;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
          }

          .Emergency-tb-bt-ypbzhss {
            width: 100%;
            height: 49px;
            background-color: #1d4cb3;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
          }

          .Emergency-tb-bt-ypbzls {
            width: 100%;
            height: 49px;
            background-color: #1745b0;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
          }

          :deep(.el-table th.el-table__cell) {
            padding: 8px 0;
          }

          :deep(.el-table td.el-table__cell) {
            padding: 0px 0;
          }
        }

        :deep(.el-table--border th.el-table__cell.gutter:last-of-type) {
          border-bottom-color: transparent;
        }
      }
    }
  }

  // :deep(.el-input__inner) {
  //   height: 23px;
  //   line-height: 23px;
  //   border: #3270ff 1px solid;
  //   border-radius: 2px;
  //   color: #eeeeee;
  //   background-color: rgba(34, 88, 143, 1);
  // }
}

.tabs_row_content {
  max-height: 80px;
  padding: 10px;
  padding-bottom: 0;
  color: #fff;
  box-sizing: border-box;
  overflow-y: auto;

  .sjgy_name {
    // display: flex;
    // align-items: center;
    margin-top: 10px;

    .name {
      // display: inline-block;
      // width: 80px;
      // min-width: 80px;
      // height: 20px;
      // background: red;
      word-break: break-all;
    }

    .content {
      display: inline-block;
      flex: 1;
      word-break: break-all;
    }
  }
}

.Emergency-tb-bd {
  :deep(.el-select) {
    .el-input--suffix .el-input__inner {
      box-shadow: 1px 1px 10px 2px #36afff inset;
      border: none;
      border-radius: 7px;
      color: #eeeeee;
      background-color: rgba(34, 88, 143, 0.5);
    }
  }
}

:deep(::-webkit-scrollbar-track) {
  background: transparent;
}

// :deep(::-webkit-scrollbar) {
//   height: 18px;
// }

:deep(::-webkit-scrollbar-thumb) {
  box-shadow: none;
  background: #22588f;
}

:deep(.el-dialog) {
  height: 70% !important;
  margin-top: 22vh !important;

  div::-webkit-scrollbar {
    height: 10px;
  }
}

:deep(.el-dialog__header) {
  padding: 10px 10px 10px 10px;
  background-color: #5077ff;
}

// 弹窗头部文字颜色
:deep(.el-dialog__title) {
  font-size: 18px;
  color: #fff;
}

:deep(.tc td.el-table__cell) {
  border-bottom: 1px solid #ebeef5;
}

:deep(.leftTopBtn) {
  height: 0px !important;
}
</style>
